<template>
    <link rel="stylesheet" type="text/css" href="/assets/css/typelist.css" />
    <!-- 导航栏 -->
    <van-nav-bar
        :title="TypeName"
        fixed
        placeholder
        z-index="1000"
    >

    </van-nav-bar>

    <div class="center">
        <van-sidebar v-model="Active" @change="TypeToggle">
            <div v-for="(item,key) in TypeList" :key="key">
                <van-sidebar-item :title="item.name" />
            </div>
        </van-sidebar>

        <!-- 下拉刷新 -->
        <van-pull-refresh v-model="refreshing" @refresh="refresh">
        <!-- 加载列表 -->
        <van-list
            v-model:loading="loading"
            :finished="finished"
            :offset="10"
            :immediate-check="false"
            finished-text="没有更多了"
            @load="load"
        >
            <ul class="proul" v-if="list">
            <li v-for="(item,key) in list" :key="key">
                <router-link :to="{path: '/product/info', query: {proid: item.id}}">
                <van-image
                    width="100%"
                    height="150"
                    :src="item.thumbs_text"
                />
                </router-link>

                <router-link :to="{path: '/product/info', query: {proid: item.id}}">
                <p class="title">{{item.name}}</p>
                </router-link>
            </li>
            </ul>
        </van-list>
        </van-pull-refresh>
    </div>
    <tabbar />
</template>

<script setup>
    import tabbar from '@/components/common/tabbar.vue';

    const {proxy} = getCurrentInstance()

    let TypeList = ref([{name:"全部",value: '0'}])
    let Active = ref('0')
    let TypeName = ref('商品分类') //标题栏上面的分类名称

    let list = ref([]) //数据列表
    let page = ref(1)  //分页
    let loading = ref(false) //加载状态
    let finished = ref(false) //是否无更多数据
    let refreshing = ref(false) //下拉刷新


    //分类切换
    const TypeToggle = async (value) =>
    {
        refreshing.value = true
        Active.value = TypeList.value[value].value
        refresh()
    }

    //生命周期
    onBeforeMount(async() => {
      type()
      load()
    })

    const type = async () => {
      var result = await proxy.$POST({
        url: '/product/type'
      })

      if(result.code == 0)
      {
        proxy.$fail(result.msg)
        return false
      }

      result.data.map(item => {
        TypeList.value.push({name: item.name,value: item.id})
      })
    }

    //下拉刷新
    const refresh = async () =>
    {
        //可以去掉定时器
        setTimeout(() => {
          //清空查询参数
          page.value = 1
          list.value = []
          finished.value = false
          loading.value = true

          //加载数据方法
          load()
        }, 1000)
    }

    const load = async () =>
    {
      //如果刷新状态已经为true，就要修改为false
      if(refreshing.value)
      {
        refreshing.value = false
      }

      //组装数据
      var params = {
        typeid: Active.value,
        page:page.value
      }

      //发送请求
      var result = await proxy.$POST({
        url: '/product/typeindex',
        params
      })

      //请求发送完，加载状态也完了
      loading.value = false

      if(result.code == 0)
      {
        finished.value = true
        return;
      }

      TypeName.value = result.data.TypeName

      list.value = list.value.concat(result.data.list)
      page.value++
    } 
</script>